<template>
	<div class="setup">
		<p>count的值为{{count}}---{{name}}</p>
		<button @click="count+=1">+1</button>
	</div>
</template>

<script>
import { ref,reactive } from "@vue/composition-api";
export default {
	setup(props, ctx) {
        // ref() 函数用来根据给定的值创建一个响应式的数据对象，
        // ref() 函数调用的返回值是一个对象，这个setup 上只包含一个 .value 属性：
        // 创建响应式数据对象 count，初始值为 0
        const count = ref(0)

        // 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以
        // console.log(count.value) // 输出 0


        // 2. 创建 ref 并挂载到 reactive 中
        const c1 = ref(0)
        const state = reactive({
        c1
        })

        // 再次创建 ref，命名为 c2
        const c2 = ref(9)
        // 将 旧 ref c1 替换为 新 ref c2
        state.c1 = c2
        state.c1++

        console.log(state.c1) // 输出 10
        console.log(c2.value) // 输出 10
        console.log(c1.value) // 输出 0
        return {
            count,
            name: ref('王小英')
        }
	}
};
</script>
<!--
一.ref 也是可以创造响应数据
-->
